import { useState } from "react";
import Eye from "./Eye";
function randomRange(n, m) {
	return n + (m - n) * Math.random();
}
function EyeDemo() {
	const [eyes, setEyes] = useState([]);
	const addEye = () => {
		const size = randomRange(50, 100);
		const r = randomRange(10, (size / 2) * 0.8);
		const left = randomRange(0, window.innerWidth - size);
		const top = randomRange(0, window.innerHeight - size);
		const color = `rgb(${randomRange(0, 255)},${randomRange(
			0,
			255
		)},${randomRange(0, 255)})`;
		const props = { size, r, left, top, color };
		const key = Date.now() + "";

		const eye = (
			<Eye
				key={key}
				{...props}
				onClick={() => {
					setEyes((eyes) => eyes.filter((item) => item !== eye));
					// console.log(eyes.map((eye) => eye.key));
				}}
			/>
		);
		setEyes([...eyes, eye]);
	};
	return (
		<div>
			{eyes}
			<button onClick={addEye}>添加眼睛</button>
		</div>
	);
}
export default EyeDemo;
